<template>
  <div class="portalTab">
    <div v-if="rightTools" class="btnsArr">
      <Icon type="icon-tianjia2" @click.native="handleClickIcon('icon-tianjia2')" />
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabData" :key="item.id" :label="item.label" :name="item.name">
        <div slot="label">
          <div v-show="tabIconShow(item)" class="triangle-icon" />

          <span class="titleLabel">{{ item.label }}</span>
          <el-badge v-if="item.number || item.number===0" :value="item.number" :max="99" />

          <!-- <div></div> -->
        </div>
        <slot :name="item.name" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  props: {
    tabData: {
      type: Array,
      default: () => []
    },
    tabValue: {
      type: String,
      default: ''
    },
    rightTools: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      activeName: this.tabValue
    }
  },
  methods: {
    handleClick(tab, event) {
      this.$emit('click', this.activeName)
    },
    tabIconShow(item) {
      return this.activeName === item.name
    },
    handleClickIcon(iconName) {
      this.$emit('iconClick', iconName)
    }
  }
}
</script>
<style lang="less" scoped>

.portalTab {
  width: 100%;
  height: 100%;
  position: relative;
  .triangle-icon {
    position: relative;
    width: 2px;
    height: 17px;
    .bgColor();
    top: 4px;
    display: inline-block;
    margin-right: 5px;
  }
  .btnsArr {
    position: absolute;
    right: 9px;
    top: 13px;
    z-index: 10;
    cursor: pointer;
  }
  /deep/ .el-tabs {
    height: 100%;
    .el-tabs__header {
      background: #ffffff;
      padding: 0px 10px;
      margin: 0;
      .titleLabel {
        display: inline-block;
        margin-right: 5px;
      }
      .active {
        font-weight: bold;
        color: #fed09c;
      }
      .el-badge {
        .el-badge__content {
          line-height: 17px;
        }
      }
    }
  }
}
</style>
